<template>
    <view class="enterprise">
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :auto-clean-list-when-reload="false"
            :auto-scroll-to-top-when-reload="false"
            bg-color="#fff"
            :refresher-status.sync="refresherStatus"
            @query="queryList"
            v-model="dataList"
        >
            <view slot="top">
                <video
                    style="width: 100%; height: 210px"
                    id="myVideo"
                    autoplay="autoplay"
                    :src="currentData.videoUrl"
                    controls
                ></video>
            </view>
            <view class="enterprise_details">
                <view class="enterprise_top" v-if="currentData.videoIntro">
                    {{ currentData.videoIntro }}
                </view>
                <u-gap height="32rpx"></u-gap>
                <text class="enterprise_top_t">{{
                    `共  ${dataList.length}  个视频`
                }}</text>
            </view>
            <u-gap height="1rpx" bgColor="#F5F5F5;"></u-gap>
            <view class="">
                <view class="flex_wrap row_middle">
                   <!-- <text class="enterprise_bg"></text>
                    <u-text text="目录" size="32rpx" bold /> -->
					
					<u-tabs
					    :list="navList"
					    @click="click"
					    @change="changeType"
					    :current="current"
					    :scrollable="false"
					    :inactiveStyle="inactiveStyle"
					    :activeStyle="activeStyle"
					    lineColor="#588BF3"
					></u-tabs>
                </view>
                <view class="news" v-if="current === 0">
                    <u-swipe-action>
                        <u-swipe-action-item
                            ref="actionItem"
                            :options="options2"
                            v-for="(item, index) in dataList"
                            :disabled="!actionItemBool"
                            :key="index"
                            @click="(e) => clickItem(e, item, index)"
                        >
                            <view
                                class="news_list"
                                :style="{
                                    background:
                                        index === currentIndex
                                            ? 'rgba(22, 130, 255, .2)'
                                            : 'none',
                                }"
                                :key="index"
                                @click="
                                    currentData = item;
                                    currentIndex = index;
                                "
                            >
                                <view class="news_detail flex_wrap row_between">
                                    <u-image
                                        height="152rpx"
                                        width="274rpx"
                                        :src="item.videoCover"
                                        mode="aspectFill"
                                        radius="16rpx"
                                    />
                                    <view>{{
                                        item.videoName || item.videoIntro
                                    }}</view>
                                    <text class="indexBox"
                                        >第{{ index + 1 }}节</text
                                    >
                                    <view class="box">
                                        <view class="iconBox"></view>
                                    </view>
                                </view>
                            </view>
                        </u-swipe-action-item>
                    </u-swipe-action>
                </view>
            </view>
			<view class="news" v-if="current === 1">
			    <view class="u_parse">
					<rich-text :nodes="useInterest" class="wrapper"></rich-text>
				</view>
			</view>
           <!-- <view class="purchase flex_wrap" slot="bottom">
                <u-button
					v-if="!btnShow"
                    text="添加章节"
                    color="#588BF3"
                    :hairline="false"
                    shape="circle"
                    @click="addVideo"
                />
            </view> -->
        </z-paging>
    </view>
</template>

<script>
import { baseUrl } from "@/config/tendIdConfig";
import { deleteSalesmanVideo } from "@/api/customerAgent.js";
let videoSeries = "";
export default {
    data() {
        return {
			btnShow:'',
            dataList: [],
            currentData: {},
            currentIndex: 0,
            recordType: 5,
            actionItemBool: 0,
            options2: [
                {
                    text: "删除",
                    style: {
                        backgroundColor: "#f56c6c",
                    },
                },
                {
                    text: "编辑",
                    style: {
                        backgroundColor: "#588bf3",
                    },
                },
            ],
			navList: [
			    {
			        name: "目录",
			    },
			    {
			        name: "介绍",
			    },
			],
			current: 0,
			inactiveStyle: {
			    fontSize: "32rpx",
				color: "#999",
			},
			activeStyle: {
			    fontSize: "32rpx",
			    fontWeight: "none",
			    color: "#333",
			},
			useInterest:''
        };
    },
    onShow() {
        this.$refs.paging.reload();
    },
    onLoad(options) {
        this.btnShow = options.btnShow;
        videoSeries = options.videoSeries;
        this.actionItemBool = options.actionItemBool || 0;
        // actionItemBool: 1, //1是可以删除 编辑
        if (options.recordType) this.recordType = options.recordType;
    },
    methods: {
        addVideo() {
            uni.$u.route({
                url: "pages_video/videoGoods/index",
                params: {
                    status: "add",
                    videoSeries: videoSeries,
                },
            });
        },
		changeType(e) {
			if(e.index){
				console.log("changeType :>> ", e,this.currentData,this.useInterest);
				this.useInterest = this.formatRichText(this.currentData.videoIntroduction)
			}else{
				this.$refs.paging.reload();
			}
		},
		//解析富文本方法
		formatRichText(html) {
			let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
					'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/<p>/gi, '<br>');
			newContent = newContent.replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		},
		click(e) {
		    this.current = e.index;
		},
        queryList(pageNum, pageSize) {
            const token =
                this.$store.getters?.customer_token ||
                uni.getStorageSync("customer_token");
            const that = this;
            uni.request({
                url: baseUrl + "/customer/video_info_customer/teachPageVideo",
                method: "POST",
                header: {
                    Authorization: token,
                },
                data: {
                    pageNum,
                    pageSize,
                    recordType: this.recordType,
                    videoSeries,
                },
                success(res) {
                    if ([991, 992, 401].includes(res.data.code)) {
                        uni.$u.toast(res.data.msg);
                        that.$store.commit("SET_LOGOUT");
                        uni.navigateTo({
                            url: "/pages/user/phone/indexApp",
                        });
                        return;
                    }
                    const result = res.data.data?.rows ?? [];
                    if (result.length)
                        that.currentData = result[that.currentIndex];
                    that.$refs.paging.complete(result);
                },
            });
        },
        clickItem(e, item, i) {
            var _this = this;
            console.log("comfirm1111", e, item); //点击确定之后执行的代码
            e.index && this.addVideoFun(item);
            !e.index &&
                uni.showModal({
                    title: "",
                    content: "您确定删除当前商品",
                    cancelText: "取消", // 取消按钮的文字
                    confirmText: "确认", // 确认按钮的文字
                    showCancel: true, // 是否显示取消按钮，默认为 true
                    confirmColor: "#f55850",
                    // cancelColor: "#39B54A",
                    success: (res) => {
                        if (res.confirm) {
                            deleteSalesmanVideo(item.id).then((res) => {
                                if (res.code == 200) {
                                    this.$refs.actionItem.forEach((item) =>
                                        item.closeHandler(true)
                                    );
                                    this.$delete(this.dataList, i);
                                }
                            });
                        } else {
                            console.log("cancel"); //点击取消之后执行的代码
                            //  _this.closeSwipeAction();
                        }
                    },
                });
        },
        addVideoFun(item) {
            this.$refs.actionItem.forEach((item) => item.closeHandler(true));
            uni.$u.route({
                url: "pages_video/videoGoods/index",
                params: {
                    status: "update",
                    videoSeries: item.videoSeries,
                    id: item.id,
                },
            });
        },
    },
};
</script>

<style scoped lang="scss">
/* 企業頁面 */
.enterprise {
    background: #ffffff;
    width: 100%;
    height: 100vh;
    color: #333333;
}
.enterprise_details {
    padding: 32rpx 28rpx;
}
.enterprise_top {
    display: flex;
    font-size: 32rpx;
    color: #3d3d3d;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
.enterprise_bg {
    display: block;
    width: 12rpx;
    height: 12rpx;
    background: #588bf3;
    margin-right: 18rpx;
    border-radius: 50%;
}

.news {
    height: auto;
    overflow: hidden;
	margin-top: 10rpx;
}

.news_list {
    display: flex;
    position: relative;
    flex-direction: row;
    padding: 0 28rpx;
    box-sizing: border-box;
}

.news_detail {
    padding: 24rpx 0 3rpx;
    margin-bottom: 20rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    position: relative;
    view {
        padding-left: 30rpx;
        // width: 100%;
        box-sizing: border-box;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 32rpx;
        color: #3d3d3d;
        line-height: 54rpx;
    }
    .indexBox {
        position: absolute;
        left: 0;
        top: 24rpx;
        width: 104rpx;
        height: 36rpx;
        background: #1682ff;
        font-weight: 400;
        color: #ffffff;
        line-height: 36rpx;
        font-size: 24rpx;
        text-align: center;
        border-top-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;
    }
    .box {
        width: 274rpx;
        height: 152rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        position: absolute;
        top: 24rpx;
        left: 0;
        background: rgba(0, 0, 0, 0.2);
        .iconBox {
            width: 76rpx;
            height: 76rpx;
            background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/26/9213c9113ad34df6b80ecda7346dd543.png);
            background-size: contain;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
.purchase {
    width: 100vw;
    height: auto;
    padding: 40rpx;
}
</style>
